<template>
    <div class="page-wrapper" :style=" { backgroundImage:`url(${bgImg})` }" >
        <div class="page-content" style="padding-top:50px; ">
            <div class="title">小易AI</div>
            <!-- Tabs -->
            <div class="custom-tabs">
                <div class="custom-tabs-nav">
                    <Transition name="fade2">
                        <div class="nav-pointer" :key="current" :style="{ left: `${current * 20 + 10}%` }"></div>
                    </Transition>
                    <div
                        v-for="( item, index) in data"
                        :key="item.title"
                        :class="{ 'nav-item':true, 'selected':index === current }"
                        @click=" current = index "
                    >
                        <div><img :src="item.img" /></div>
                        <div class="nav-item-title">{{ item.title }}</div>
                    </div>
                </div>
                <div class="custom-tabs-content" >
                    <Transition name="fade2" mode="out-in">
                        <component :is="subMaps[current]"></component>
                    </Transition>
                </div>
            </div>
           
        </div>
    </div>
</template>

<script setup> 
    import { ref, watch, onMounted, defineComponent } from 'vue';
    import { ArrowRightBold } from '@element-plus/icons-vue';
    import bgImg from '../../../public/tabs-bg.png';
    import Icon1 from '../../../public/scene-icon-1.png';
    import Icon2 from '../../../public/scene-icon-2.png';
    import Icon3 from '../../../public/scene-icon-3.png';
    import Icon4 from '../../../public/scene-icon-4.png';
    import Icon5 from '../../../public/scene-icon-5.png';

    import SubCom1 from './components/SubCom1.vue';
    import SubCom2 from './components/SubCom2.vue';
    import SubCom3 from './components/SubCom3.vue';
    import SubCom4 from './components/SubCom4.vue';
    import SubCom5 from './components/SubCom5.vue';
    const subMaps = {
        0:SubCom1,
        1:SubCom2,
        2:SubCom3,
        3:SubCom4,
        4:SubCom5
    }

    const data = [{ title:'知识库', img:Icon1 }, { title:'设备模型库', img:Icon2 }, { title:'场景化定制', img:Icon3 }, { title:'数据处理', img:Icon4 }, { title:'组合算法', img:Icon5 }];
    const current = ref(0);

</script>

<style >
    .custom-tabs {
        
    }
    .custom-tabs-nav {
        width:100%;
        display:flex;
        padding-bottom:16px;
        border-bottom:1px solid #e1e4ea;
        position:relative;
    }
    .custom-tabs-nav .nav-pointer {
        position:absolute;
        left:0;
        bottom:0;
        width:62px;
        height:6px;
        border-radius:32px;
        background:#335CFF;
        transform:translateX(-31px);
    }
    .custom-tabs-nav .nav-item {
        flex:1;
        text-align:center;
    }
    .custom-tabs-nav .nav-item .nav-item-title {
        font-size:24px;
        line-height:40px;
        color:#525866;
        transition:color 0.5s ease-out;
    }
    .custom-tabs-nav .nav-item.selected .nav-item-title {
        font-weight:bold;
        color:#0E121B;
    }
    
    .custom-tabs-content {
        height:570px;
        padding:24px 0;
        text-align:center;
    }
    .custom-tabs-content > div {
        height:100%;
    }
    .custom-tabs-content > img {
        width:100%;
    }

    .fade2-enter-active, .fade2-leave-active {
        transition:opacity 0.5s ease-out;    
    }
    .fade2-enter-from, .fade2-leave-to {
        opacity:0;
    }
    
</style>